<template>
  <div>
    <BlogCardList :itemList="officialLink"></BlogCardList>
  </div>
</template>

<script>

import BlogCardList from '../../components/Blog/BlogCardList'
export default {
  name: 'BlogFriendLink',
  components: { BlogCardList },
  data:function() {
    return {
      officialLink: [
        {
          id: '1001',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        },
        {
          id: '1002',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1003',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1004',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1005',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1006',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1007',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1008',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1001',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        },
        {
          id: '1002',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1003',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1004',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1005',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1006',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1007',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1008',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1001',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        },
        {
          id: '1002',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1003',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1004',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1005',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1006',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1007',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }, {
          id: '1008',
          url: 'https://spring.io/',
          description: 'Spring企业级开发必备技术',
          logo: 'http://image.luokangyuan.com/timjie-tu-20180731223952.png'
        }
      ]
    }
  },
  methods:{
    /**
     * 随机颜色生成函数
     * @returns {string}
     */
    getRandomColor() {
      return '#' + (Math.random() * 0xffffff << 0).toString(16)
    },
  },
  created() {
    // 初始化官方链接
    this.officialLink.forEach((item) => {
      var image = `linear-gradient(135deg, ${this.getRandomColor()} 0%, ${this.getRandomColor()} 100%)`
      item.style = {
        'border-radius': '8px',
        'background-image': image
      }
    })
  }
}
</script>

<style scoped>

</style>
